<script lang="ts" setup>
    // 点击事件
    const clickHandler = (name: string) =>
    {
        switch (name)
        {
            case "button":
            {
                uni.navigateTo({
                    url: "/pages/button/index"
                });

                break;
            }
            case "icon":
            {
                uni.navigateTo({
                    url: "/pages/icon/index"
                });

                break;
            }
            case "transition":
            {
                uni.navigateTo({
                    url: "/pages/transition/index"
                });

                break;
            }
            case "image":
            {
                uni.navigateTo({
                    url: "/pages/image/index"
                });

                break;
            }
            case "input":
            {
                uni.navigateTo({
                    url: "/pages/input/index"
                });

                break;
            }
            case "checkbox":
            {
                uni.navigateTo({
                    url: "/pages/checkbox/index"
                });

                break;
            }
            case "radio":
            {
                uni.navigateTo({
                    url: "/pages/radio/index"
                });

                break;
            }
            case "switch":
            {
                uni.navigateTo({
                    url: "/pages/switch/index"
                });

                break;
            }
            case "slider":
            {
                uni.navigateTo({
                    url: "/pages/slider/index"
                });

                break;
            }
            case "textarea":
            {
                uni.navigateTo({
                    url: "/pages/textarea/index"
                });

                break;
            }
            case "popup":
            {
                uni.navigateTo({
                    url: "/pages/popup/index"
                });

                break;
            }
            case "dialog":
            {
                uni.navigateTo({
                    url: "/pages/dialog/index"
                });

                break;
            }
            case "form":
            {
                uni.navigateTo({
                    url: "/pages/form/index"
                });

                break;
            }
            default:
            {
                break;
            }
        }
    };

    // console.log(`\n %c 当前语言环境： ${getLocale()} \n`, 'color: #ffffff; background: #3c9cff; padding:5px 0; border-radius: 5px;');
    // console.log(`\u2728 %cNuxt 语言环境 %c ${getLocale()}`, "color: black; border-radius: 3px 0 0 3px; padding: 2px 2px 1px 10px; background: #00DC82", "border-radius: 0 3px 3px 0; padding: 2px 10px 1px 2px; background: #00DC8220", "");

    // asyncFn(() =>
    // {
    //     setLocale("en");
    //
    //     console.info(getLocale(), "///");
    //
    // }, 3000);

</script>

<template>
    <u-layout
        :show-back="false"
        :enable-refresh="false"
        title="首页"
    >
        <!-- 框架 -->
        <view class="container">
            <!-- 按钮 -->
            <view
                class="line"
                @tap="clickHandler('button')"
            >
                <text class="text">
                    按钮
                </text>
            </view>
            <!-- //按钮 -->

            <!-- 图标 -->
            <view
                class="line"
                @tap="clickHandler('icon')"
            >
                <text class="text">
                    图标
                </text>
            </view>
            <!-- //图标 -->

            <!-- 动画 -->
            <view
                class="line"
                @tap="clickHandler('transition')"
            >
                <text class="text">
                    动画
                </text>
            </view>
            <!-- //动画 -->

            <!-- 图片 -->
            <view
                class="line"
                @tap="clickHandler('image')"
            >
                <text class="text">
                    图片
                </text>
            </view>
            <!-- //图片 -->

            <!-- 输入框 -->
            <view
                class="line"
                @tap="clickHandler('input')"
            >
                <text class="text">
                    输入框
                </text>
            </view>
            <!-- //输入框 -->

            <!-- 复选框 -->
            <view
                class="line"
                @tap="clickHandler('checkbox')"
            >
                <text class="text">
                    复选框
                </text>
            </view>
            <!-- //复选框 -->

            <!-- 单选框 -->
            <view
                class="line"
                @tap="clickHandler('radio')"
            >
                <text class="text">
                    单选框
                </text>
            </view>
            <!-- //单选框 -->

            <!-- 开关 -->
            <view
                class="line"
                @tap="clickHandler('switch')"
            >
                <text class="text">
                    开关
                </text>
            </view>
            <!-- //开关 -->

            <!-- 滑块 -->
            <view
                class="line"
                @tap="clickHandler('slider')"
            >
                <text class="text">
                    滑块
                </text>
            </view>
            <!-- //滑块 -->

            <!-- 文本域 -->
            <view
                class="line"
                @tap="clickHandler('textarea')"
            >
                <text class="text">
                    文本域
                </text>
            </view>
            <!-- //文本域 -->

            <!-- 弹出层 -->
            <view
                class="line"
                @tap="clickHandler('popup')"
            >
                <text class="text">
                    弹出层
                </text>
            </view>
            <!-- //弹出层 -->

            <!-- 弹窗 -->
            <view
                class="line"
                @tap="clickHandler('dialog')"
            >
                <text class="text">
                    弹窗
                </text>
            </view>
            <!-- //弹窗 -->

            <!-- 表单 -->
            <view
                class="line"
                @tap="clickHandler('form')"
            >
                <text class="text">
                    表单
                </text>
            </view>
            <!-- //表单 -->
        </view>
        <!-- //框架 -->
    </u-layout>
</template>

<style lang="scss" scoped>
    .container
    {
        .line
        {
            .text
            {
                line-height: 24px;
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>